<template>
    <div>
        <section class="unit" ref='unit'>
       
        <h2 class='title'>
            <span>各单位年龄结构及人员分布</span>
            <span>
                <i class="fa fa-minus"></i>
                <i class="fa fa-times"></i>
            </span>
        </h2>
        <div id ='echarts1' style='height:1020px;width:1089px'></div>
    </section>
    </div>
</template>

<script>
import echarts from "echarts";

export default {
  props: ["res"],
  mounted() {

    if (this.$refs.unit) {
      let self = this;
      let unitData = {
        yAxisData() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].c_leader_unit);
          });
          return arr;
        },
        fiftyabovecount() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].unit_fiftyabovecount);
          });
          return arr;
        },
        fortytofiftysvcount() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].unit_fortytofiftysvcount);
          });
          return arr;
        },
        fortytofiftysycount() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].unit_fortytofiftysycount);
          });
          return arr;
        },
        thirtytofortsycount() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].unit_thirtytofortsycount);
          });
          return arr;
        },
        thirtybelowcount() {
          let arr = [];
          self.res.unit.forEach((ele, i) => {
            arr.push(self.res.unit[i].unit_thirtybelowcount);
          });
          return arr;
        }
      };

      this.$nextTick(function() {
        this.drawPie("#echarts1", unitData);
      });
    }
  },
  methods: {
    drawPie(id, unitData) {
      this.charts = echarts.init(this.$refs.unit.querySelector(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: "15px",
          data: ["30岁以下", "30-40岁", "40-45岁", "45-50岁", "50岁以上"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: unitData.yAxisData()
        },
        series: [
          {
            name: "30岁以下",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: unitData.thirtybelowcount()
          },
          {
            name: "30-40岁",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: unitData.thirtytofortsycount()
          },
          {
            name: "40-45岁",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: unitData.fortytofiftysvcount()
          },
          {
            name: "45-50岁",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: unitData.fortytofiftysycount()
          },
          {
            name: "50岁以上",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: unitData.fiftyabovecount()
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.unit {
  margin-top: 30px;
  background-color: #fff;
  border-top: 3px solid #00c0ef;
}

.unit .title {
  border-bottom: 1px solid #f1f1f1;
  line-height: 40px;
overflow: hidden;
  padding: 0 10px;
  font-size: 18px;
}

.unit .title span:first-of-type {
  font-size: 18px;
  font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: rgb(68, 68, 68);
  font-weight: normal;
  float: left;
}

.unit .title i {
  cursor: pointer;
}
.unit .title span:last-of-type {
  font-size: 14px;
  font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: rgb(151, 160, 179);
  font-weight: normal;
  float: right;
}

.unit .title span:last-of-type i {
  margin-left: 10px;
}
</style>